<template>
  <div class="form-field" :class="{ 'has-error': showError, 'is-mobile': isMobile }">
    <label v-if="label" class="form-label">
      <span>{{ label }}</span>
      <span v-if="required" class="required-mark">*</span>
    </label>
    <div class="select-wrapper">
      <select
        :value="modelValue"
        class="form-select"
        :disabled="disabled"
        @change="onChange"
        @blur="onBlur"
        @focus="onFocus"
      >
        <option v-if="placeholder" value="" disabled selected hidden>{{ placeholder }}</option>
        <option v-for="option in options" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>
      <div class="select-arrow">
        <i class="fas fa-chevron-down"></i>
      </div>
    </div>
    <div v-if="showError" class="error-message">{{ error }}</div>
    <div v-if="hint && !showError" class="hint-message">{{ hint }}</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'BaseSelect',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(option => 'value' in option && 'label' in option)
      }
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    hint: {
      type: String,
      default: ''
    },
    error: {
      type: String,
      default: ''
    },
    showSearch: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change', 'blur', 'focus'],
  data() {
    return {
      isFocused: false
    }
  },
  computed: {
    ...mapState('app', ['device']),
    isMobile() {
      return this.device === 'mobile'
    },
    showError() {
      return !!this.error
    },
    // 得到选中项的标签
    selectedLabel() {
      if (!this.modelValue) return ''
      const selected = this.options.find(opt => opt.value === this.modelValue)
      return selected ? selected.label : ''
    }
  },
  methods: {
    onChange(event) {
      this.$emit('update:modelValue', event.target.value)
      this.$emit('change', event.target.value)
    },
    onBlur(event) {
      this.isFocused = false
      this.$emit('blur', event.target.value)
    },
    onFocus(event) {
      this.isFocused = true
      this.$emit('focus', event.target.value)
      
      // 在iOS上模拟native picker效果
      if (this.isMobile && this.isIOS && event.target) {
        event.target.blur()
        setTimeout(() => {
          event.target.focus()
        }, 10)
      }
    }
  },
  mounted() {
    // 检测是否是iOS设备
    this.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
  }
}
</script>

<style scoped>
.form-field {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.required-mark {
  color: #f5222d;
  margin-left: 4px;
}

.select-wrapper {
  position: relative;
}

.form-select {
  width: 100%;
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  transition: all 0.3s;
  appearance: none;
  -webkit-appearance: none;
}

.form-select:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  outline: none;
}

.form-select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  color: #999;
}

.select-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  font-size: 12px;
}

.error-message {
  font-size: 12px;
  color: #f5222d;
  margin-top: 4px;
}

.hint-message {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.has-error .form-select {
  border-color: #f5222d;
}

.has-error .form-select:focus {
  box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
}

/* 移动端优化样式 */
.is-mobile .form-select {
  height: var(--touch-target-size);
  font-size: 16px; /* 防止iOS缩放 */
  padding: 0 36px 0 16px;
  border-radius: var(--border-radius-md);
}

.is-mobile .form-label {
  font-size: var(--font-size-sm);
  margin-bottom: 10px;
}

.is-mobile .select-arrow {
  right: 16px;
  font-size: 14px;
}

.is-mobile .error-message,
.is-mobile .hint-message {
  font-size: var(--font-size-xs);
  margin-top: 6px;
}

/* Safari中特殊处理 */
@supports (-webkit-touch-callout: none) {
  .is-mobile .form-select {
    background-color: #fff; /* 防止iOS默认灰色背景 */
  }
}

/* 安卓原生下拉样式优化 */
@supports not (-webkit-touch-callout: none) {
  .is-mobile .form-select {
    background-image: linear-gradient(45deg, transparent 50%, #666 50%), 
                      linear-gradient(135deg, #666 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
}
</style> 